<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-3作业</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/common.js" defer></script>
</head>
<body>
    <div class="inner_c">
        <h1>Part2.模块3作业</h1>
    </div>
    <!-- 第一题开始 -->
    <div class="inner_c">
        <h2>1.简述绑定事件的三要素</h2>
        <div class="content">
            <span>答：1.事件源；2.事件类型；3.事件内容</span>
            <dl>
                <dt>事件源</dt>
                <dd>指需要绑定事件的对象，例如：需要给&lt;input&gt;绑定事件，那么&lt;input&gt;则为事件源</dd>
                <dt>事件类型</dt>
                <dd>指需要绑定的事件的类型，例如：点击事件"onclick"，鼠标事件等等</dd>
                <dt>事件内容</dt>
                <dd>指触发所绑定的事件后，需要执行的内容；一般写在函数体中</dd>
                <dt>事件写法</dt>
                <dd>写在标签内：&lt;input id="btn" type="button" value="按钮" onclick="onClick()"&gt;</dd>
                <dd>在js代码中：btn.onclick=onClick();</dd>
            </dl>
        </div>
    </div>
    <!-- 第一题结束 -->
    <!-- 第二题开始 -->
    <div class="inner_c">
        <h2>2.简述innerHTML和innerText的区别</h2>
        <div class="content">
            <span>答：两个属性都是获取标签内容，我们分别从三方面进行叙述</span>
            <dl>
                <dt>内容获取</dt>
                <dd> 
                    <p>innerHTML：在获取标签内容时，如果内容中包含标签，则不会过滤标签，会连带标签一起读取，也就是可以获取子级的HTML结构及内容</p>
                    <p>innerText：在获取标签内容时，如果内容中包含标签，则会把标签过滤，只获取其内容和子级的内容，并不会保留HTML结构</p>
                </dd>
                <dt>内容更改</dt>
                <dd>
                    <p>innerHTML：在进行属性赋值时，如果赋值语句中含有HTML标签，会将HTML标签结构进行加载</p>
                    <p>innerText：在进行属性赋值时，如果赋值语句中含有HTML标签，不会加载HTML标签结构，只会当成普通字符进行加载</p>
                </dd>
                <dt>应用场景</dt>
                <dd>
                    <p>innerHTML：在内部有子标签结构时进行使用</p>
                    <p>innerText：内部只有普通字符时进行使用</p>
                </dd>
            </dl>
        </div>
    </div>
    <!-- 第二题结束 -->
    <!-- 第三题开始 -->
    <div class="inner_c">
        <h2>3.简述排他思想制作的思路。</h2>
        <div class="content">
            <span>
                答：拿ul-&gt;li结构举例。首先制作两个css样式，一个common公用样式，一个current当前选中样式。在js代码中获取&lt;ul&gt;标签对象，取出ul.children，即拿到所有的&lt;li&gt;标签对象。
                我们在注册&lt;li&gt;标签事件时。如果每次先去判断上一次是选中的哪个&lt;li&gt;标签，再更新当前选中的话，会平白的增加循环执行次数。所以在我们要更新当前选中标签的样式之前，对所有的&lt;li&gt;
                标签进行current样式清除(或者设置common公用样式)，然后通过判断当前循环到的&lt;li&gt;对象是否是现在选中的，如果是则将样式更改为current。这样只需一轮循环即可。代码结构清晰，代码量也少。
            </span>
        </div>
    </div>
    <!-- 第三题结束 -->
    <!-- 第四题开始 -->
    <div class="inner_c">
        <h2>4.列举常见的鼠标事件。</h2>
        <div class="content">
            <dl>
               <dt>答：</dt> 
               <dd>
                   <ol>
                       <li>鼠标左键单击事件: onclick</li>
                       <li>鼠标左键双击事件: ondblclick</li>
                       <li>鼠标按下事件: onmousedown</li>
                       <li>鼠标按键抬起事件: onmouseup</li>
                       <li>鼠标移动事件: onmousemove</li>
                       <li>鼠标移入事件: onmouseover</li>
                       <li>鼠标移出事件: onmouseout</li>
                   </ol>
               </dd>
            </dl>
        </div>
    </div>
    <!-- 第四题结束 -->
    <!-- 第五题开始 -->
    <div class="inner_c">
        <h2>5.设置下拉框中的默认随机选中项，自己书写结构和js。</h2>
        <div class="content">
            <input class="btn" type="button" value="快捷选择" id="quickBtn">
            <select name="food" id="food">
                <option>天真</option>
                <option>纯洁</option>
                <option>烂漫</option>
                <option>腹黑</option>
                <option>炸裂</option>
                <option>海绵</option>
            </select>
        </div>
    </div>
    <!-- 第五题结束 -->
    <!-- 第六题开始 -->
    <div class="inner_c">
        <h2>6.编写一段程序，实现文本框获取和失去焦点效果。要求：1、获得焦点时，如果内部内容为提示语 请输入搜索关键字 ，清空内容并且设置文字颜色为黑色；2、失去焦点时，如果内容为空，恢复默认提示语，并且设置文字颜色为灰色</h2>
        <div class="content">
            搜索：<input id="text" type="text" value="" placeholder="请输入搜索关键字">
        </div>
    </div>
    <!-- 第六题结束 -->
    <!-- 第七题开始 -->
    <div class="inner_c">
        <h2>7. `&lt;div class="erweima hide" id="er"&gt;`，将class的属性值中的hide更换为show，其他保持不变，请写出适合的方法。</h2>
        <div class="content">
            <p>
                let div = document.getElementByTagName('div');<br>
                &nbsp;&nbsp;1. div.className = div.className.replace('hide', 'show');<br>
                &nbsp;&nbsp;2. div.className = div.className.split(' ')[0] + ' show';
            </p>
        </div>
    </div>
    <!-- 第七题结束 -->
    <!-- 第八题开始 -->
    <div class="inner_c">
        <h2>8.  有一组文本框，要求让每一个文本框在自己输入的时候，背景显示灰色，其他文本框显示白色。</h2>
        <div class="content">
            <div id="input_p">
                文本框1：<input type="text">
                文本框2：<input type="text">
                文本框3：<input type="text">
                文本框4：<input type="text">
            </div>
        </div>
    </div>
    <!-- 第八题结束 -->
    <!-- 第九题开始 -->
    <div class="inner_c">
        <h2>9.  在box元素中动态创建无序列表，自定义列表项内容。</h2>
        <div class="content">
            <div>
                输入：<input id="input_value" type="text" value="" placeholder="输入添加内容">
                <input class="btn" id="create_li" type="button" value="添加">
            </div>
            <ul id="box">
                
            </ul>
        </div>
    </div>
    <!-- 第九题结束 -->
    <!-- 第十题开始 -->
    <div class="inner_c">
        <h2>10. 利用事件委托的方法，给一个无序列表的列表项添加点击更改背景色事件。简单说明思路。</h2>
        <div class="content">
            <p>a.给列表项父级元素ul注册监听事件click，并在回调函数参数中增加参数e，即event</p>
            <p>b.点击子项时，会触发子项的click事件，同时出现事件冒泡，父元素的click事件也会触发</p>
            <p>c.触发后，通过参数传递的e参数，即为被点击的子项，即e.target === li</p>
            <p>d.直接操作e.target的背景颜色，即可实现效果</p>
        </div>
    </div>
    <!-- 第十题结束 -->
    <!-- 第十一题开始 -->
    <div class="inner_c">
        <h2>11. 请自定义一个注册事件的兼容函数，要求兼容三种注册事件方法。</h2>
        <div class="content">
            <img class="code" src="images/registerEvent.png" alt="">
        </div>
    </div>
    <!-- 第十一题结束 -->
    <!-- 第十二题开始 -->
    <div class="inner_c">
        <h2>12. 将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户多次点击出现加速且运动不能停止的情况，请给出解决代码。</h2>
        <div class="content">
            <img class="code" src="images/interval.png" alt="">
        </div>
    </div>
    <!-- 第十二题结束 -->
    <div class="inner_c">
        <h2>13. 给 part1-模块2-任务1 的轮播图静态页面添加JS事件，让其成功滚动</h2>
        <div class="content banner_c">
            <div class="banner" id="banner">
                <ul class="banner_ul" id="banner_ul">
                    <li><a href="#"><img src="images/banner_01.jpg"></a></li>
                    <li><a href="#"><img src="images/banner_02.jpg"></a></li>
                    <li><a href="#"><img src="images/banner_03.jpg"></a></li>
                    <li><a href="#"><img src="images/banner_04.png"></a></li>
                    <li><a href="#"><img src="images/banner_05.jpg"></a></li>
                    <li><a href="#"><img src="images/banner_01.jpg"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 第十二题结束 -->
    <script src="js/index.js"></script>
    <script src="js/banner.js"></script>
</body>
</html>